<template>
  <div class="help-container">
    <van-nav-bar
      title="帮助中心"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="help-content">
      <!-- 搜索区域 -->
      <div class="search-section">
        <van-search
          v-model="searchKeyword"
          placeholder="请输入问题关键词"
          shape="round"
          @search="onSearch"
        />
      </div>

      <!-- 常见问题分类 -->
      <div class="category-section">
        <h2 class="section-title">常见问题分类</h2>
        <div class="category-grid">
          <div 
            v-for="category in categories" 
            :key="category.id"
            class="category-item"
            @click="onCategoryClick(category.id)"
          >
            <div class="category-icon">
              <van-icon :name="category.icon" size="24px" />
            </div>
            <span class="category-name">{{ category.name }}</span>
          </div>
        </div>
      </div>

      <!-- 热门问题 -->
      <div class="hot-questions-section">
        <h2 class="section-title">热门问题</h2>
        <van-collapse v-model="activeHotQuestions" accordion>
          <van-collapse-item 
            v-for="question in hotQuestions" 
            :key="question.id"
            :title="question.title"
            :name="question.id"
          >
            <div class="answer-content">
              {{ question.answer }}
            </div>
            <div v-if="question.steps" class="solution-steps">
              <h4>解决步骤：</h4>
              <ol>
                <li v-for="(step, index) in question.steps" :key="index">
                  {{ step }}
                </li>
              </ol>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>

      <!-- 联系客服 -->
      <div class="contact-section">
        <h2 class="section-title">联系客服</h2>
        <div class="contact-methods">
          <div class="contact-item" @click="onPhoneContact">
            <van-icon name="phone-o" size="20px" />
            <div class="contact-info">
              <div class="contact-title">客服电话</div>
              <div class="contact-detail">400-123-4567</div>
            </div>
            <van-icon name="arrow" size="16px" />
          </div>
          
          <div class="contact-item" @click="onOnlineService">
            <van-icon name="chat-o" size="20px" />
            <div class="contact-info">
              <div class="contact-title">在线客服</div>
              <div class="contact-detail">9:00-18:00</div>
            </div>
            <van-icon name="arrow" size="16px" />
          </div>
          
          <div class="contact-item" @click="onEmailContact">
            <van-icon name="envelop-o" size="20px" />
            <div class="contact-info">
              <div class="contact-title">客服邮箱</div>
              <div class="contact-detail">service@wanshifu.com</div>
            </div>
            <van-icon name="arrow" size="16px" />
          </div>
        </div>
      </div>

      <!-- 意见反馈 -->
      <div class="feedback-section">
        <van-button 
          round 
          block 
          type="primary" 
          @click="onFeedback"
          class="feedback-btn"
        >
          <van-icon name="edit" size="16px" style="margin-right: 5px;" />
          意见反馈
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { showToast, showConfirmDialog } from 'vant';

const router = useRouter();

const searchKeyword = ref('');
const activeHotQuestions = ref('');

// 问题分类
const categories = ref([
  { id: 'account', name: '账户问题', icon: 'user-o' },
  { id: 'order', name: '订单问题', icon: 'orders-o' },
  { id: 'payment', name: '支付问题', icon: 'cash-back-record' },
  { id: 'service', name: '服务问题', icon: 'service-o' },
  { id: 'refund', name: '退款问题', icon: 'refund-o' },
  { id: 'technical', name: '技术问题', icon: 'setting-o' }
]);

// 热门问题
const hotQuestions = ref([
  {
    id: '1',
    title: '如何注册万师傅账号？',
    answer: '您可以通过手机号快速注册万师傅账号，注册后即可享受平台服务。',
    steps: [
      '点击登录页面的"注册账号"',
      '输入您的手机号码',
      '获取并输入验证码',
      '设置登录密码',
      '完成注册'
    ]
  },
  {
    id: '2',
    title: '忘记密码怎么办？',
    answer: '如果您忘记了密码，可以通过手机号找回。',
    steps: [
      '在登录页面点击"忘记密码"',
      '输入注册时使用的手机号',
      '获取短信验证码',
      '设置新的登录密码',
      '使用新密码登录'
    ]
  },
  {
    id: '3',
    title: '如何发布服务需求？',
    answer: '登录后，您可以在首页点击"发布需求"来创建服务订单。',
    steps: [
      '登录您的万师傅账号',
      '点击首页的"发布需求"按钮',
      '选择服务类型和具体项目',
      '填写服务地址和时间要求',
      '确认发布并等待师傅接单'
    ]
  },
  {
    id: '4',
    title: '支付方式有哪些？',
    answer: '万师傅支持多种支付方式，包括微信支付、支付宝、银行卡等。',
    steps: [
      '在支付页面选择支付方式',
      '确认订单金额',
      '跳转到相应支付平台完成支付',
      '支付成功后等待服务开始'
    ]
  },
  {
    id: '5',
    title: '如何申请退款？',
    answer: '在服务未开始或服务有质量问题时可以申请退款。',
    steps: [
      '进入"我的订单"页面',
      '找到需要退款的订单',
      '点击"申请退款"',
      '选择退款原因并提交',
      '等待平台审核处理'
    ]
  }
]);

// 搜索功能
const onSearch = () => {
  if (!searchKeyword.value.trim()) {
    showToast('请输入搜索关键词');
    return;
  }
  
  // 在实际项目中，这里可以调用搜索API
  showToast(`搜索: ${searchKeyword.value}`);
};

// 分类点击
const onCategoryClick = (categoryId) => {
  const category = categories.value.find(item => item.id === categoryId);
  showToast(`查看${category.name}`);
  
  // 可以根据分类ID跳转到对应的问题列表页面
  // router.push(`/help/category/${categoryId}`);
};

// 联系客服方法
const onPhoneContact = async () => {
  try {
    await showConfirmDialog({
      title: '拨打客服电话',
      message: '是否拨打 400-123-4567？',
    });
    // 在实际应用中，这里可以调用拨打电话的功能
    showToast('即将拨打客服电话');
  } catch {
    // 用户取消
  }
};

const onOnlineService = () => {
  showToast('正在转接在线客服...');
  // 跳转到在线客服页面
  // router.push('/chat');
};

const onEmailContact = () => {
  showToast('跳转到邮件应用');
  // 打开邮件应用
  // window.location.href = 'mailto:service@wanshifu.com';
};

// 意见反馈
const onFeedback = () => {
  showToast('跳转到意见反馈页面');
  // router.push('/feedback');
};

// 返回
const onClickLeft = () => {
  router.back();
};
</script>

<style lang="scss" scoped>
.help-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.help-content {
  padding: 0 16px 20px;
}

.search-section {
  background: white;
  padding: 16px 0;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}

.section-title {
  font-size: 18px;
  color: #333;
  margin: 20px 0 15px;
  font-weight: 600;
}

// 分类网格
.category-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 0;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.3s ease;
  
  &:active {
    background: #e9ecef;
    transform: scale(0.95);
  }
}

.category-icon {
  margin-bottom: 8px;
  color: #1677ff;
}

.category-name {
  font-size: 12px;
  color: #333;
}

// 热门问题
.hot-questions-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.answer-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.solution-steps {
  margin-top: 12px;
  
  h4 {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
  }
  
  ol {
    padding-left: 20px;
    
    li {
      font-size: 13px;
      color: #666;
      margin-bottom: 6px;
      line-height: 1.5;
    }
  }
}

// 联系客服
.contact-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.contact-methods {
  .contact-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background: #f8f9fa;
    }
  }
}

.contact-info {
  flex: 1;
  margin-left: 12px;
}

.contact-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

.contact-detail {
  font-size: 14px;
  color: #666;
}

// 意见反馈
.feedback-section {
  padding: 0 10px;
}

.feedback-btn {
  margin-top: 10px;
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .help-container {
    background-color: #000;
  }
  
  .search-section,
  .category-section,
  .hot-questions-section,
  .contact-section {
    background: #1a1a1a;
  }
  
  .section-title {
    color: #fff;
  }
  
  .category-item {
    background: #2a2a2a;
    
    &:active {
      background: #3a3a3a;
    }
  }
  
  .category-name {
    color: #fff;
  }
  
  .contact-title {
    color: #fff;
  }
  
  .contact-detail {
    color: #999;
  }
}
</style>